<template>
	<view class="workdetailContent">
		<!-- 1 -->
		<view class="cardItem1">
			<view class="item1_left">
				<view class="top">
					<view class="text">截止时间：{{topData.deadlinetime}}</view>
					<view class="name">{{topData.name}}</view>
				</view>
				<view class="text">
					<text v-if="topData.cname!=''||topData.cname!=null">{{topData.cname}}｜</text>
					<text>已完成{{topData.do_num}}/{{topData.all_num}}人</text>
				</view>
			</view>
			<view class="item1_right">
				<view class="itemRow1">
					<view class="btns fail" v-if="tabId==1" @click="getRevocation(1)">撤回</view>
					<view class="btns" @click="getRevocation(2)">重 做</view>
				</view>
				<view class="itemRow2">
					<image src="/static/workImg/icon@1.png" mode="" class="iconBg"></image>
					<view class="row2Icon">
						<view class="sore">{{topData.avg_score}}</view>
						<view class="name">班级平均分</view>
						<view class="total">作业总分{{topData.full_score}}分</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="course-grade">
			<view class="grade-text" :class="{'active-tab': index == currentIndex}" v-for="(item, index) in tabText"
				:key="index" @tap="handleSwitchTab(index)">

				<view class="text"> {{item}} </view>
				<image v-if="index==1" class="picIcons" referrerpolicy="no-referrer" src="/static/workImg/icon@3.png">
				</image>
			</view>
		</view>


		<!-- <view class="contentItem"> -->
		<!-- 作业报告 v-if="currentIndex==0"-->
		<view class="tabItem" v-show="isShow1">
			<view class="tabCard1">
				<view class="title">
					<view class="name">平均分</view>
					<view class="name">最高分</view>
					<view class="name">最低分</view>
					<view class="item_text">
						<text class="text">优秀率</text>
						<text class="txt">(≥90)</text>
					</view>
					<view class="item_text">
						<view class="text">及格率</view>
						<view class="txt">(≥60)</view>
					</view>
				</view>
				<view class="lists">
					<view class="li">{{markData.avg_score}}</view>
					<view class="li">{{markData.max_score}}</view>
					<view class="li">{{markData.min_score}}</view>
					<view class="li">{{markData.excellent_rate}}</view>
					<view class="li">{{markData.pass_rate}}</view>
				</view>
			</view>
			<view class="tabCard1">
				<view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">分数段分析 </view>
					<view class="txt">(得分率分布)</view>
				</view>

				<BarChart :tid="tabId"></BarChart>
			</view>
			<view class="tabCard1 tabCardfenxi" v-show="lineBox">
				<view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">题型分析</view>
				</view>
				<view class="title">
					<view class="name">题目</view>
					<view class="name">得分率</view>
					<view class="name">平均分</view>
					<view class="name">最高分</view>
					<view class="name">满分率</view>
				</view>
				<view class="lists">
					<view class="li">听说模考</view>
					<view class="li">{{analyzeType1.score_rate}}</view>
					<view class="li">{{analyzeType1.avg_score}}</view>
					<view class="li">{{analyzeType1.max_score}}</view>
					<view class="li">{{analyzeType1.full_score_rate}}</view>
				</view>
				<view class="lists">
					<view class="li">单词跟读</view>
					<view class="li">{{analyzeType2.score_rate}}</view>
					<view class="li">{{analyzeType2.avg_score}}</view>
					<view class="li">{{analyzeType2.max_score}}</view>
					<view class="li">{{analyzeType2.full_score_rate}}</view>
				</view>
				<view class="lists">
					<view class="li">课文跟读</view>
					<view class="li">{{analyzeType3.score_rate}}</view>
					<view class="li">{{analyzeType3.avg_score}}</view>
					<view class="li">{{analyzeType3.max_score}}</view>
					<view class="li">{{analyzeType3.full_score_rate}}</view>
				</view>
				<view class="lists">
					<view class="li">线上作答</view>
					<view class="li">{{analyzeType4.score_rate}}</view>
					<view class="li">{{analyzeType4.avg_score}}</view>
					<view class="li">{{analyzeType4.max_score}}</view>
					<view class="li">{{analyzeType4.full_score_rate}}</view>
				</view>
				<view class="lists">
					<view class="li">报听写</view>
					<view class="li">{{analyzeType5.score_rate}}</view>
					<view class="li">{{analyzeType5.avg_score}}</view>
					<view class="li">{{analyzeType5.max_score}}</view>
					<view class="li">{{analyzeType5.full_score_rate}}</view>
				</view>
				<LineChart :tid="tabId"></LineChart>
			</view>
		</view>
		<!-- 学生成绩 v-else-if="currentIndex==1"-->
		<view class="tabItem" v-show="isShow2">
			<view class="tabCard">
			<!-- <view class="tabCard tabCard2"> -->
				<view class="title">
					<view class="text">姓名</view>
					<view class="text">开始时间</view>
					<view class="text">进度</view>
					<view class="text">得分(30分)</view>
				</view>
				<view class="lists">
					<view class="li" v-for="(item, index) in studentData" :key="index">

						<view class="num">
							<text>{{item.name}}</text>
							<image referrerpolicy="no-referrer" src="/static/workImg/icon@4.png">
							</image>
						</view>
						<view class="name name1">{{item.startTime}}</view>
						<view class="name name2">{{item.schedule}}</view>
						<view class="name name3">{{item.score}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 题目统计 v-else-->
		<view class="tabItem" v-show="isShow3">
			<view class="tabCard tabCard3">
				<view class="title">
					<view class="text">共{{totalData.length}}个作业内容</view>
					<view class="text">平均分/总分</view>
				</view>
				<view class="lists">
					<view class="li" v-for="(item, index) in totalData" :key="index" @tap="goTab3Detail(item.tid)">
						<view class="name">{{item.tname}}</view>
						<view class="num">
							<text>{{item.score}}/{{item.full_score}}</text>
							<image referrerpolicy="no-referrer" src="/static/arrow_icon.png">
							</image>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- </view> -->
		<!-- 普通弹窗 -->
		<!-- <uni-popup ref="popup" :mask-click="false"> -->
		<uni-popup ref="popup">
			<view class="popupRow">
				<image src="/static/workImg/reBg.png" referrerpolicy="no-referrer"></image>
				<view class="popup-items">
					<view class="title">{{btnID==1? '撤回':'重做'}}作业?</view>
					<view class="text">确定要{{btnID==1? '撤回':'重做'}}作业吗？</view>
					<view class="popup-btn">
						<view class="btn" @click="close">取 消</view>
						<view class="btn btnOK" @click="getSumbut(btnID)">确 认</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import LineChart from '@/pages/homeworkDetail/lineChart.vue';
	import BarChart from '@/pages/homeworkDetail/barChart.vue';
	export default {
		components: {
			LineChart,
			BarChart
		},
		data() {
			return {
				tabId: 0,
				btnID: 0, //1撤回   2重做
				topData: {},
				currentIndex: 0,
				tabText: ['作业报告', '学生成绩'],
				// tabText: ['作业报告', '学生成绩', '题目统计'],
				markData: {}, //分数统计 
				lineBox:false,
				analyzeType1: {},
				analyzeType2: [],
				analyzeType3: [],
				analyzeType4: [],
				analyzeType5: [],
				studentData: [], //学生成绩
				totalData: [], //题目统计
				isShow1: true,
				isShow2: false,
				isShow3: false,
			};
		},
		onLoad(option) {
			// console.log('tid', option)
			this.tabId = Number(option.tid)
		},
		mounted() {
			this.getTop()
			this.getMarks()
			this.getStudent()
			this.getTopic()
			// this.getquestionData()
			// this.getKeHouList88()
		},
		methods: {
			getTop() {
				var that = this
				var data = {
					// id: 1,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail', data).then(res => {
					// console.log('作业详情-顶部信息', res);
					if (res.code != 0) {
						that.topData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getMarks() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				// https://d-xueer.bigchun.com/api/new_homework/teacher_homework_detail_score    post  作业详情-作业报告-分数统计
				that.$post('new_homework/teacher_homework_detail_score', data).then(res => {
					// console.log('作业详情-作业报告-分数统计', res);
					if (res.code != 0) {
						that.markData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getquestionData() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_analysis', data).then(res => {
					// console.log('作业详情-作业报告-题型分析', res);
					if (res.code != 0) {
						const arr = res.data.question_analysis
						const getValue = (keys, source) => {
							return keys.reduce((nextObj, key) => {
								return nextObj && nextObj[key] ? nextObj[key] : null
							}, source)
						}
						that.analyzeType1 = getValue([[0],['听说模考']], arr)
						that.analyzeType2 = getValue([[1],['单词跟读']], arr)
						that.analyzeType3 = getValue([[2],['课文跟读']], arr)
						that.analyzeType4 = getValue([[3],['线上作答']], arr)
						that.analyzeType5 = getValue([[4],['报听写']], arr)
						// console.log('作业详情-作业报告-题型分析arr', arr);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getStudent() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_achievement', data).then(res => {
					// console.log('作业详情-学生成绩', res);
					if (res.code != 0) {
						that.studentData = res.data.achievement
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getTopic() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_census', data).then(res => {
					// console.log('作业详情-题目统计', res);
					if (res.code != 0) {
						that.totalData = res.data.census
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			getKeHouList88() {
				var that = this
				var data = {
					id: 8,
					tid: 1045747,
				}
				// 题目详情-题目列表
				// https://d-xueer.bigchun.com/api/new_homework/teacher_homework_detail_question_list
				that.$post('new_homework/teacher_homework_detail_question_list', data).then(res => {
					// console.log('题目详情-题目内容', res);
					if (res.code != 0) {
						// that.totalData = res.data.census
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		
			handleSwitchTab(index) {
				var that = this
				that.currentIndex = index;
				// console.log('currentIndex', index)
				that.getTop()
				that.getMarks()
				that.getStudent()
				that.getTopic()
				// that.getquestionData()
				if (index == 0) {
					that.isShow1 = true
					that.isShow2 = false
					that.isShow3 = false

				} else if (index == 1) {
					that.isShow2 = true
					that.isShow1 = false
					that.isShow3 = false
				} else {
					that.isShow3 = true
					that.isShow2 = false
					that.isShow1 = false
				}
			},
			goTab3Detail(id) {
				uni.navigateTo({
					url: `/pages/totalPro/index?id=${this.tabId}&tid=${Number(id)}`,
				});
			},
			getRevocation(index) {
				this.btnID = index
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			getSumbut(index){
				console.log('indez',index)
				var that = this
				var data = {
					// id: 4,
					id: index
				}
				const revokeUrl = 'new_homework/teacher_homework_revoke' //撤销
				const redoUrl = 'new_homework/teacher_homework_redo' //重做
				const newUrl = index==2 ? redoUrl : revokeUrl
				const text = index==2 ? '重做' : '撤销'
				that.$post(newUrl, data).then(res => {
					console.log(text, res);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					if (res.code != 0) {
						that.$refs.popup.close()
					}
				})								
			},
			

		}
	}
</script>

<style lang='less' scoped>
	.workdetailContent {
		margin: 0 32rpx;
	}

	.cardItem1 {		
		margin: 32rpx 0;
		background: linear-gradient(180deg, #F2F7FD 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(41, 121, 255, 0.05);
		border-radius: 24r;
		border: 2rpx solid;
		opacity: 0.95;
		border-image: linear-gradient(44deg, rgba(41, 121, 255, 1), rgba(122, 172, 254, 1), rgba(41, 121, 255, 1)) 1 1;
		display: flex;
		justify-content: space-between;
	}

	.cardItem1 .item1_left {
		margin: 30rpx 0 30rpx 30rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cardItem1 .item1_left .text {
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		text-align: left;
	}

	.cardItem1 .item1_left .top .name {
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
		text-align: left;
		margin-top: 12rpx;
	}

	.cardItem1 .item1_right {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		margin: 30rpx 30rpx 10rpx 0;
	}

	.cardItem1 .item1_right .itemRow1 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.cardItem1 .item1_right .itemRow1 .fail {
		margin-right: 20rpx;
	}

	.cardItem1 .item1_right .itemRow1 .btns {
		width: 120rpx;
		height: 48rpx;
		background: #2979FF;
		box-shadow: 0rpx 8r 12rpx 0rpx rgba(41, 121, 255, 0.5);
		border-radius: 24rpx;
		line-height: 44rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 12rpx;
	}

	.cardItem1 .item1_right .itemRow2 {
		position: relative;
		width: 192rpx;
		height: 192rpx;
	}

	.cardItem1 .item1_right .itemRow2 .iconBg {
		width: 192rpx;
		height: 192rpx;
	}

	.cardItem1 .item1_right .itemRow2 .row2Icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;
		width: 100%;
		text-align: center;
	}

	.cardItem1 .item1_right .itemRow2 .row2Icon .sore {
		height: 56rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #2979FF;
		line-height: 56rpx;	
	}

	.cardItem1 .item1_right .itemRow2 .row2Icon .name {
		height: 34rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #727A8E;
		line-height: 34rpx;
	}

	.cardItem1 .item1_right .itemRow2 .row2Icon .total {
		height: 22r;
		font-weight: 400;
		font-size: 16rpx;
		color: #999999;
		line-height: 22rpx;
	}

	/*  */
	.course-grade {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #eee;
		color: #fff;
		height: 90rpx;
		font-weight: 600;
		font-size: 26rpx;
	}

	.course-grade .grade-text {
		margin: 0 20rpx;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
		text-align: right;
		display: flex;
		align-items: center;

	}

	.course-grade .picIcons {
		width: 32rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	.course-grade .active-tab {
		font-weight: 500;
		position: relative;
	}

	.course-grade .active-tab::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 9;
		border-bottom: 4rpx solid #2979FF;
		width: 128rpx;
		height: 6rpx;
	}

	/* tabItem  xuesheng*/
	.tabItem .tabCard {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		padding-bottom: 10rpx;
		margin-top: 30rpx;
	}

	.tabItem .tabCard .title {
		height: 80rpx;
		background: #7AA7FF;
		border-radius: 24rpx;
		display: flex;
		margin: 30rpx;
		
	}

	.tabItem .tabCard .title .text {
		display: block;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;		
	}
	.tabItem .tabCard .title .text:nth-of-type(1){width: 30%;}
	.tabItem .tabCard .title .text:nth-of-type(2){width: 50%;}
	.tabItem .tabCard .title .text:nth-of-type(3){width: 30%;}
	.tabItem .tabCard .title .text:nth-of-type(4){width: 30%;}
	.tabItem .tabCard .lists {
		margin: 0 30rpx;
	}
	.tabItem .tabCard .lists .li {
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.tabItem .tabCard .lists .li .num {
		width: 30%;
		height: 36rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		line-height: 36rpx;
		text-align: left;
		margin-left: 20rpx;
	}
	
	.tabItem .tabCard .lists .li .num image {
		width: 32rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}

	.tabItem .tabCard .lists .li .name {
		min-height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		
	}
	.tabItem .tabCard .lists .li .name1{width: 50%;}
	.tabItem .tabCard .lists .li .name2{width: 30%;}
	.tabItem .tabCard .lists .li .name3{width: 30%; }

	/* timu */
	.tabItem .tabCard3 .title .text:nth-of-type(1){width: 65%;}
	.tabItem .tabCard3 .title .text:nth-of-type(2){width: 35%;}
	.tabItem .tabCard3 .lists .li .name {width: 65%;}
	.tabItem .tabCard3 .lists .li .num{width: 35%;text-align: center;}
	.tabItem .tabCard3 .lists .li .num image {width: 10rpx;height: 18rpx;}
	
	/* baogao */	
	.tabItem .tabCard1 {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		padding-bottom: 10rpx;
		margin-top: 30rpx;
	}

	.tabItem .tabCard1 .title {
		height: 80rpx;
		background: #7AA7FF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
		margin: 30rpx 30rpx 0;
	}


	.tabItem .tabCard1 .title .name {
		line-height: 80rpx;
		border-right: 2rpx solid #fff;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: right;
		padding-right: 20rpx;
		padding: 0 20rpx 0 18rpx;
	}

	.tabItem .tabCard1 .title .item_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	.tabItem .tabCard1 .title .item_text:nth-last-of-type(1) {
		border-left: 2rpx solid #fff;
	}

	.tabItem .tabCard1 .title .item_text .text {
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: right;
	}

	.tabItem .tabCard1 .title .item_text .txt {
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
		text-align: right;
		margin-top: 5rpx;
	}

	.tabItem .tabCard1 .lists {
		height: 80rpx;
		background: #F4F5F7;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin: 0 30rpx 20rpx 30rpx;
	}

	.tabItem .tabCard1 .lists .li {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
	}

	.tabItem .tabCardfenxi .lists {
		margin: 0 30rpx 0;
	}

	.tabItem .tabCardfenxi .title .name {
		width: 170rpx;
		text-align: center;
	}

	.tabItem .tabCardfenxi .lists .li:nth-of-type(1) {
		width: 140rpx;
	}

	.tabItem .tabCardfenxi .lists .li {
		width: 20%;
	}

	.tabItem .tabCard1 .head_title {
		display: flex;
		align-items: center;
		margin: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #eeee;
	}

	.tabItem .tabCard1 .head_title image {
		width: 30rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.tabItem .tabCard1 .head_title .txt {
		height: 44rpx;
		font-weight: 600;
		font-size: 26rpx;
		color: #727A8E;
		line-height: 44rpx;
		text-align: left;
	}

	.tabItem .tabCard1 .head_title .headH1 {
		height: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
	}
	
	
	/* tankuang */
	.popupRow {
		width: 320px;
		height: 410px;
	}
	
	.popupRow image {
		width: 320px;
		height: 410px;
		position: relative;
	}
	
	.popupRow .popup-items {
		position: absolute;
		top: 8%;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.popupRow .popup-items .title {
		font-weight: 500;
		font-size: 44rpx;
		color: #222222;
	}
	
	.popupRow .popup-items .text {
		font-weight: 400;
		font-size: 28rpx;
		color: #727A8E;
		margin: 12rpx 0 60rpx;
	}
	
	.popupRow .popup-items .popup-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.popupRow .popup-items .popup-btn .btn {
		font-weight: 400;
		font-size: 28rpx;
		color: #727A8E;
		width: 240rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: rgba(41, 121, 255, 0.15);
		border-radius: 44rpx;
	}
	
	.popupRow .popup-items .popup-btn .btnOK {
		margin-left: 40rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2979FF;
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(41, 121, 255, 0.5);
	}
</style>
